<template>
  <div class="menu">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page,index) in pages" :key="index">
        <div class="menu-item" v-for="item in page" :key="item.id">
          <div class="menu-img"><img :src="item.imgUrl" alt="">
          </div>
          <p class="menu-text">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    props: {
      iconList: Array
    },
    data () {
      return {
        swiperOption: {
          autoplay: false
        },
      }
    },
    computed: {
      pages () {
        return this._.chunk(this.iconList, 8)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "~css/mixin.styl"

  .menu > > >  .swiper-container
    height: 0
    padding-bottom 50%

  .menu-item
    float: left
    width 25%
    padding-bottom 22%
    padding-top .2rem
    height: 0
    overflow hidden
    text-align center
    .menu-img
      margin 0 auto
      width: 1.1rem
      height: 1.1rem
      img
        width: 100%
        height: 100%
    .menu-text
      margin-top .2rem
      color #333
      font-size .28rem
      ellipse()
</style>
